<template>
<div>
<el-container>
    <el-header style="background-color:teal;">
        <h2 style="color:white;display:inline">汽修宝 - 平台管理</h2>
    </el-header>
    <el-container>
        <el-aside width='180px' v-show='menuShow'>
        
        </el-aside>
        <el-aside style="width:0px;margin-right:20px" v-show="!menuShow">
            <el-button v-show="!menuShow" style='width:25px;position:fixed;left:-20px;top:60px' icon="el-icon-d-arrow-right" @click="hiddenMenu"></el-button>
        </el-aside>

        
    
  </el-container>
</el-container>
</div>
</template>

<script>
export default {
  data(){
    return {
      activeIndex:"/index",
      menuShow:true,
      mainStyle:""
    }
  },
  methods:{
    menuInit:function(){
      var url=window.location.toString().replace(window.location.origin+'/#','') ;
      if(url=="")url="/index";
      this.activeIndex=url.toLowerCase();
      this.mainStyle="width:"+(window.innerWidth-200)+"px;height:"+(window.innerHeight-60)+"px;margin-left:20px";
    },
    hiddenMenu:function(){
        this.menuShow=!this.menuShow;
        if(this.menuShow)this.mainStyle="width:"+(window.innerWidth-200)+"px;height:"+(window.innerHeight-60)+"px;margin-left:20px";
        else this.mainStyle="width:"+(window.innerWidth-40)+"px;height:"+(window.innerHeight-60)+"px;margin-left:20px";
    },
    loginOut(){
        this.$http.post(this.$store.state.url+"/admin/logout").then(
            response=>{
                if(response.data.status==200){}
            }
        ).catch();
        window.sessionStorage.removeItem("menuList");
        window.location=this.$store.state.url+"/#/login";
    }
  },
  created:function(){
    if(window.sessionStorage.getItem("menuList")==null){
        window.location=this.$store.state.url+"/#/login";
    }
    this.menuInit();
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
el-submenu{
  width:80%;
}
el-menu-item{
  width:80%;
}

</style>
